<template>
	<div id="withdrawal_list">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-select v-model="params.status" placeholder="审核状态" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in statusList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.type" placeholder="提现类型" clearable @change="search">
					<el-option :value="item.value" :label="item.label" v-for="(item, index) in typeList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker
					@change = 'timeChange'
					v-model="timeArr"
					type="datetimerange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="dialogVisible = true">提现</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" stripe v-loading="loading">
			<el-table-column align="center" label="提现类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">银行卡</span>
                    <span v-if="scope.row.type == 2">支付宝</span>
                    <span v-else>微信</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="所属银行">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">{{scope.row.bankName}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="银行卡号">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">{{scope.row.bankNum}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
			<el-table-column align="center" label="支付宝账号">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 2">{{scope.row.account}}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            
			<el-table-column align="center" label="提现金额" prop="money"></el-table-column>
			<el-table-column align="center" label="真实姓名" prop="realName"></el-table-column>
			<el-table-column align="center" label="审核状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status===1">通过</span>
					<span v-if="scope.row.status===0">审核中</span>
					<span v-if="scope.row.status===-1">不通过</span>
				</template>
			</el-table-column>
            <el-table-column align="center" label="不通过理由" prop="reason"></el-table-column>
			<el-table-column align="center" label="创建时间">
				<template slot-scope="scope">
					{{$common.getDate(scope.row.createTime)}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination 
            background 
            @size-change="handleSizeChange"
            @current-change="getList" 
            :current-page.sync="params.pageNo"
		    :page-sizes="[10, 20, 50, 100]" 
            :page-size="params.pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total">
		</el-pagination>
        <el-dialog
            title="提现"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form label-width="100px">
                <el-form-item label="提现类型：">
                    <el-select v-model="formData.type">
                        <!-- <el-option label="银行卡提现" :value="1"></el-option> -->
                        <el-option label="支付宝提现" :value="2"></el-option>
                        <!-- <el-option label="微信提现" :value="3"></el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="可提现金额:">
                    <el-input disabled v-model="info.balance"></el-input>
                </el-form-item>
                <template v-if="formData.type == 1">
                    <el-form-item label="选择银行：">
                        <el-select v-model="formData.bankName">
                            <el-option v-for="item in bankList" :label="item.name" :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="formData.bankName == '其他'" label="银行名称：">
                        <el-input v-model="formData.otherBankName" placeholder="请输入银行名称"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号：">
                        <el-input v-model="formData.bankNum"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名：">
                        <el-input v-model="formData.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="提现金额：">
                        <el-input v-model="formData.money" @blur="money()"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码：">
                        <el-input v-model="formData.password" type="password"></el-input>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item label="真实姓名：" v-if="formData.type == 2">
                        <el-input v-model="formData.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="支付宝账号：">
                        <el-input v-model="formData.account" v-if="formData.type == 2"></el-input>
                    </el-form-item>
                    <el-form-item label="提现金额：">
                        <el-input v-model="formData.money" @blur="money()"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码：">
                        <el-input v-model="formData.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="请用微信扫二维码进行授权：" v-if="formData.type == 3">
                        <img :src="qrlink" alt="">
                    </el-form-item>
                </template>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </span>
        </el-dialog>
	</div>
</template>

<script>
import rsa from '@/utils/rsa'
import QRCode from 'qrcode';
	export default {
		data() {
			return {
				params: {
					status: '',
					type: '',
					isCount: true,
					startTime: '',
					endTime: '',
					pageNo: 1,
					pageSize: 10,
                },
                formData:{
                    type:2,
                    bankName: '',
                    bankNum: '',
                    realName: '',
                    money: '',
                    password: '',
                },
                dialogVisible:false,
				total: 100,
				statusList: [
					{
						value: 1,
						label: '通过'
					},
					{
						value: 0,
						label: '审核中'
					},
					{
						value: -1,
						label: '不通过'
					}
				],
				typeList: [
					// {
					// 	label: '银行卡提现',
					// 	value: 1
					// },
					// {
					// 	label: '支付宝提现',
					// 	value: 2
					// },
					{
						label: '微信提现',
						value: 3
					}
                ],
                bankList: [
                    {
                        name: '中国工商银行'
                    },
                    {
                        name: '中国农业银行'
                    },
                    {
                        name: '中国建设银行'
                    },
                    {
                        name: '中国银行'
                    },      
                    {
                        name: '招商银行'
                    },
                    {
                        name: '交通银行'
                    },
                    {
                        name: '光大银行'
                    },
                    {
                        name: '中信银行'
                    },
                    {
                        name: '华夏银行'
                    },
                    {
                        name: '民生银行'
                    },
                    {
                        name: '广发银行'
                    },
                    {
                        name: '兴业银行'
                    },
                    {
                        name: '浦发银行'
                    },
                    {
                        name: '其他'
                    },
                ],
				timeArr: [],
                list: [],
                info: {},
                loading: false,
                qrlink:'',
			};
		},
		
		watch: {},
		
		created(){
            this.getList()
            this.getInfo()
            this.qrcode()
		},
		
		mounted(){
			
		},
		
		methods:{
            //生成二维码
            qrcode() {
                let str = location.protocol + '//' + location.host + '/tenant/wxLogin';
                QRCode.toDataURL(str)
                .then(url => {
                    this.qrlink = url;
                })
            },
            //---------判断非负数----------
            money:function(){
                var reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
                if(!reg.test(this.formData.money)){
                    this.formData.money = '';
                }else if(this.formData.money <= 1){
                    // this.formData.money = '';
                }else if(this.formData.money > this.info.balance){
                    this.formData.money = this.info.balance
                }else{
                    this.formData.money = Number(this.formData.money).toFixed(2);
                }
            },
            add(){
                let formData = {}
                if(this.formData.type == 1){
                    let bankName = ''
                    if(!this.formData.bankName){
                        this.$message.error('请选择银行')
                        return
                    }
                    bankName = this.formData.bankName
                    if(this.formData.bankName=='其他'){
                        bankName = undefined
                        if(!this.formData.otherBankName){
                            this.$message.error('请输入银行名称')
                            return
                        }
                    }
                    if(!this.formData.bankNum){
                        this.$message.error('请输入银行卡号')
                        return
                    }
                    if(!this.formData.realName){
                        this.$message.error('请输入真实姓名')
                        return
                    }
                    if(!this.formData.money){
                        this.$message.error('请输入提现金额')
                        return
                    }
                    if(!this.formData.password){
                        this.$message.error('请输入密码')
                        return
                    }
                    formData = {
                        type: 1,
                        bankNum: this.formData.bankNum,
                        realName: this.formData.realName,
                        money: this.formData.money,
                        password: rsa.encryptByPublicKey(this.formData.password),
                        bankName,
                    }
                }else if(this.formData.type==2){
                    if(!this.formData.realName){
                        this.$message.error('请输入真实姓名')
                        return
                    }
                    if(!this.formData.account){
                        this.$message.error('请输入支付宝账号')
                        return
                    }
                    if(!this.formData.money){
                        this.$message.error('请输入提现金额')
                        return
                    }
                    if(!this.formData.password){
                        this.$message.error('请输入密码')
                        return
                    }
                    formData = {
                        type: 2,
                        realName: this.formData.realName,
                        money: this.formData.money,
                        password: rsa.encryptByPublicKey(this.formData.password),
                        account:this.formData.account
                    }
                }else{
                    if(!this.formData.money){
                        this.$message.error('请输入提现金额')
                        return
                    }
                    if(!this.formData.password){
                        this.$message.error('请输入密码')
                        return
                    }
                    formData = {
                        type: 3,
                        money: this.formData.money,
                        password: rsa.encryptByPublicKey(this.formData.password),
                    }
                }
                if (this.formData.money < 1){
                    this.$message.error('提现金额不能少于1元')
                    return;
                }
                this.$request.post({
                    url: '/tenant/withdrawals/add',
                    params:formData,
                    success:res => {
                        this.$message.success('操作成功')
                        this.dialogVisible = false
                        this.getList()
                        this.getInfo()
                        this.formData = {
                           type:3, 
                        }
                    }
                })
            },
            getInfo(){
                this.$request.post({
                    url:'/tenant/info/show',
                    success: res => {
                        this.info = res
                    }
                })
            },
			handleSizeChange(e){
				this.params.pageSize = e
				this.params.isCount = true
				this.getList()
			},
			search(){
				this.params.pageNo = 1
				this.params.isCount = true
				this.getList()
			},
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			getList(){
				this.loading = true
				this.$request.post({
					url:'/tenant/withdrawals/list',
					params: this.params,
					success: res => {
						this.list = res.list
						if (this.params.isCount) {
							this.params.isCount = false
							this.total = res.total
						}
					},
					finally: res => {
						this.loading = false
					}
				})
			}
		},
		
		beforeDestroy() {} 
	}
</script>

<style>

</style>

<style lang="scss" scoped>
#withdrawal_list{
	.el-pagination{
        text-align: right;
        padding-top: 20px;
    }
    .el-dialog__wrapper{
        .el-select,.el-input{
            width: 80%;
        }
    }
}
</style>
